আমি কৌনিক 2.0.0-alpha.30 সংস্করণ ব্যবহার করছি। যখন কোনও অন্য রুটে পুনঃনির্দেশ করা হয়, তারপরে ব্রাউজারটি রিফ্রেশ করুন, এটি জিইটি / রুটটি দেখাচ্ছে না।
এই ত্রুটিটি কেন ঘটেছে তা অনুধাবন করতে আপনি আমাকে সহায়তা করতে পারেন?
আমি কৌনিক 2.0.0-alpha.30 সংস্করণ ব্যবহার করছি। যখন কোনও অন্য রুটে পুনঃনির্দেশ করা হয়, তারপরে ব্রাউজারটি রিফ্রেশ করুন, এটি জিইটি / রুটটি দেখাচ্ছে না।
এই ত্রুটিটি কেন ঘটেছে তা অনুধাবন করতে আপনি আমাকে সহায়তা করতে পারেন?
উত্তর:
আপনি যে ত্রুটিটি দেখছেন তা হ'ল আপনি http: // লোকালহোস্ট / রুটটির অনুরোধ করছেন যা বিদ্যমান নেই। সাইমন মতে ।
এইচটিএমএল 5 রাউটিং ব্যবহার করার সময় আপনার অ্যাপ্লিকেশানের সমস্ত রুট (বর্তমানে 404) আপনার সার্ভারের দিকের সূচক। আপনার জন্য এখানে কিছু বিকল্প রয়েছে:
লাইভ-সার্ভার ব্যবহার করে: https://www.npmjs.com/package/live-server
$live-server --entry-file=index.html`
nginx: http://nginx.org/en/docs/beginners_guide.html ব্যবহার করে
error_page 404 /index.html
টমকাট - ওয়েব.এক্সএমএল কনফিগারেশন। থেকে Kunín এর মন্তব্যে
<error-page>
<error-code>404</error-code>
<location>/index.html</location>
</error-page>
pub serve
? এইভাবে pub build
উন্নয়নের সময় আমার খুব বেশি দরকার নেই । আমি চেষ্টা করেছি কিন্তু proxy_pass
খুব ভাল কাজ করে না error_page
।
দাবি অস্বীকার: এই ফিক্সটি আলফা 44 এর সাথে কাজ করে
আমার একই সমস্যা ছিল এবং Angular.io এপিআই পূর্বরূপে তালিকাভুক্ত হ্যাশলোকেশনস্ট্রেজি প্রয়োগ করে এটি সমাধান করেছি ।
https://angular.io/docs/ts/latest/api/common/index/HashLocationStrategy-class.html
প্রয়োজনীয় নির্দেশাবলী আমদানি করে শুরু করুন
import {provide} from 'angular2/angular2';
import {
ROUTER_PROVIDERS,
LocationStrategy,
HashLocationStrategy
} from 'angular2/router';
এবং অবশেষে, এটির মতো বুটস্ট্র্যাপ করুন
bootstrap(AppCmp, [
ROUTER_PROVIDERS,
provide(LocationStrategy, {useClass: HashLocationStrategy})
]);
আপনার রুটটি http: // লোকালহোস্ট / # / রুট হিসাবে উপস্থিত হবে এবং আপনি রিফ্রেশ করার পরে এটি উপযুক্ত জায়গায় পুনরায় লোড হবে।
আশা করি এইটি কাজ করবে!
#
করে ইউআরএলে স্বয়ংক্রিয় যুক্ত হবে। এটি ব্যবহার করে URL টি থেকে # সরানোর কোনও সমাধান আছে কি?
PathLocationStrategy
কিন্তু এটি আমার পক্ষে কাজ করছে না। হয় আমি ভুল পদ্ধতি ব্যবহার করেছি অথবা পাথলোকেশনস্ট্রেজি কীভাবে ব্যবহার করতে হয় তা আমি জানি না।
কৌনিকটি ডিফল্টরূপে HTML5 পুশস্টেট ব্যবহার করে ( PathLocationStrategy
কৌণিক স্ল্যাংয়ে )।
আপনার একটি হয় এমন সার্ভারের প্রয়োজন যা এটির অনুরোধ মতো সমস্ত অনুরোধগুলি প্রক্রিয়া করে index.html
বা আপনি HashLocationStrategy
(রুটের জন্য URL এ # দিয়ে) https://angular.io/docs/ts/latest/api/common/index/HashLocationStrategy-class স্যুইচ করেন । এইচটিএমএল
আরো দেখুন Https://ngmilk.rocks/2015/03/09/angularjs-html5-mode-or- ব্যাখ্যাty-urls- using-
HashLocationStrategy
ব্যবহারে স্যুইচ করতে
> = আরসি.5 এবং 2.0.0 ফাইনালের জন্য আপডেট
import {HashLocationStrategy, LocationStrategy} from '@angular/common';
@NgModule({
declarations: [AppCmp],
bootstrap: [AppCmp],
imports: [BrowserModule, routes],
providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}]
]);
বা এর সাথে সংক্ষিপ্ত useHash
imports: [RouterModule.forRoot(ROUTER_CONFIG, {useHash: true}), ...
আপনার প্রয়োজনীয় সমস্ত আমদানি রয়েছে তা নিশ্চিত করুন
নতুন (আরসি.3) রাউটারের জন্য
<base href=".">
404 পাশাপাশি হতে পারে।
এটি পরিবর্তে প্রয়োজন
<base href="/">
> = আরসি.এক্স
bootstrap(AppCmp, [
ROUTER_PROVIDERS,
provide(LocationStrategy, {useClass: HashLocationStrategy})
// or since RC.2
{provide: LocationStrategy, useClass: HashLocationStrategy}
]);
import {provide} from '@angular/core';
import {
PlatformLocation,
Location,
LocationStrategy,
HashLocationStrategy,
PathLocationStrategy,
APP_BASE_HREF}
from '@angular/common';
> বিটা ১ for এর জন্য আপডেট করুন আমদানি পরিবর্তন হয়েছে
import {BrowserPlatformLocation} from '@angular/platform-browser';
import {provide} from 'angular2/core';
import {
// PlatformLocation,
// Location,
LocationStrategy,
HashLocationStrategy,
// PathLocationStrategy,
APP_BASE_HREF}
from 'angular2/router';
import {BrowserPlatformLocation} from 'angular2/src/router/location/browser_platform_location';
<বিটা .১6
import {provide} from 'angular2/core';
import {
HashLocationStrategy
LocationStrategy,
ROUTER_PROVIDERS,
} from 'angular2/router';
আরও দেখুন https://github.com/angular/angular/blob/master/CHANGELOG.md#200-beta16-2016-04-26 ব্রেকিং-পরিবর্তন
update for >= RC.x
(আরসি ২) এর সাথে কাজ করে router 3.0.0-alpha.7
তবে provide
কোন ক্রিয়াকলাপটি এটি প্রতিস্থাপন করেছে সে সম্পর্কে তথ্য ছাড়াই অবহেলা হিসাবে টিকা দেওয়া হয়েছে।
{provide: SomeClass, useClass: OtherClass}
আমি মনে করি আপনি যে ত্রুটিটি দেখছেন তা হ'ল কারণ আপনি http: // লোকালহোস্ট / রুটটির অনুরোধ করছেন যা বিদ্যমান নেই। আপনাকে নিশ্চিত করতে হবে যে আপনার সার্ভারটি সমস্ত অনুরোধগুলি আপনার মূল সূচক html পৃষ্ঠায় মানচিত্র করবে।
অ্যাঙ্গুলার 2 ইউআরএল শেষে হ্যাশ ব্যবহার না করে ডিফল্টরূপে এইচটিএমএল 5 রাউটিং ব্যবহার করে, পৃষ্ঠাটি রিফ্রেশ করে অন্য উত্সের অনুরোধের মতো দেখায়।
আপনি যদি ডিফল্ট এইচটিএমএল অবস্থান কৌশল ব্যবহার করেন তবে সমস্ত রাউটার সংস্করণে এটি একটি সাধারণ পরিস্থিতি।
যা হয় তা হ'ল ব্রাউজার বারের URL টি একটি সম্পূর্ণ পূর্ণ এইচটিএমএল url, উদাহরণস্বরূপ: http://localhost/route
।
সুতরাং যখন আমরা ব্রাউজার বারে এন্টার টিপুন, তখন একটি প্রকৃত HTTP অনুরোধটি সার্ভারের কাছে একটি ফাইল পাওয়ার জন্য প্রেরণ করা হয়েছিল route
।
সার্ভারের কাছে এ জাতীয় ফাইল নেই এবং অনুরোধটি পরিচালনা করতে এবং প্রতিক্রিয়া জানাতে সার্ভারে এক্সপ্রেসের মতো কোনও কিছুই কনফিগার করা হয়নি, সুতরাং সার্ভারটি 404 পাওয়া যায়নি কারণ এটি খুঁজে পেতে পারেনি route
ফাইলটি ।
আমরা যা চাই তা হ'ল সার্ভারের index.html
একক পৃষ্ঠার অ্যাপ্লিকেশনযুক্ত ফাইলটি ফিরিয়ে দেওয়া । তারপরে রাউটারটি লাথি মেরে প্রক্রিয়া করা উচিত/route
ইউআরএল ম্যাপযুক্ত উপাদানটি প্রদর্শন করা উচিত।
সুতরাং সমস্যাটি ঠিক করতে আমাদের ফিরে আসতে সার্ভারটি কনফিগার করতে হবে index.html
404 সন্ধান পাওয়া যায়নি, তার বিপরীতে অনুরোধটি পরিচালনা করা সম্ভব না হলে আমাদের (এটি আপনার একক পৃষ্ঠার অ্যাপ্লিকেশন ফাইলের নাম মনে করে)।
এটি করার উপায়টি ব্যবহৃত হওয়া সার্ভার সাইড প্রযুক্তির উপর নির্ভর করবে। উদাহরণস্বরূপ এর জাভা যদি আপনাকে কোনও সার্লেট লিখতে হতে পারে তবে রেলের মধ্যে এটি আলাদা হবে etc.
একটি কংক্রিট উদাহরণ দেওয়ার জন্য, উদাহরণস্বরূপ আপনি যদি নোডজে ব্যবহার করছেন তবে আপনাকে মিডলওয়্যারটি লিখতে হবে:
function sendSpaFileIfUnmatched(req,res) {
res.sendFile("index.html", { root: '.' });
}
এবং তারপরে এটি মিডওয়্যার চেইনের একেবারে শেষে নিবন্ধ করুন:
app.use(sendSpaFileIfUnmatched);
এটি index.html
404 ফেরতের পরিবর্তে পরিবেশন করবে , রাউটারটি কিক করবে এবং প্রত্যাশা অনুযায়ী সবকিছুই কাজ করবে।
নিশ্চিত হয়ে নিন যে এটি আপনার সূচকের মূল উপাদানটিতে রয়েছে in html:
<base href="https://stackoverflow.com/">
উদাহরণ Angular2 মধ্যে রাউটিং & ন্যাভিগেশন ডকুমেন্টেশন ব্যবহারসমূহ পরিবর্তে মাথায় নিচের কোডটি (তারা ডকুমেন্টেশন লাইভ উদাহরণ নোটে কেন ব্যাখ্যা):
<script>document.write('<base href="' + document.location + '" />');</script>
আপনি যখন কোনও পৃষ্ঠা রিফ্রেশ করবেন তখন এটি আপনার বর্তমান নথিতে গতিশীলভাবে বেস href সেট করবে। লোকেশন। আমি এটি দেখতে পাচ্ছিলাম যে ডকুমেন্টেশনগুলিকে স্কিম করে লোকদের নকল করার চেষ্টা করার জন্য কিছু বিভ্রান্তির সৃষ্টি করছে।
আপনি যদি সূচক html- তে সমস্ত অনুরোধগুলি পরিচালনা করতে আপনার অ্যাপসভারটিটি কনফিগার না করে ব্রাউজারে url লিখতে সক্ষম হতে চান তবে আপনাকে অবশ্যই হ্যাশলোকেশনস্ট্রেজি ব্যবহার করতে হবে ।
কনফিগার করার সহজতম উপায়টি হ'ল:
RouterModule.forRoot(routes, { useHash: true })
পরিবর্তে:
RouterModule.forRoot(routes)
সঙ্গে HashLocationStrategy আপনার URL গুলিতে মত করত:
http://server:port/#/path
#
ইউআরএল থেকে চাই না , আমরা কি এটি সরাতে পারি?
ওয়েবপ্যাক-ডেভ-সার্ভার ব্যবহার করার ক্ষেত্রে আমার একই সমস্যা ছিল। আমাকে আমার ওয়েবপ্যাকে ডেভসर्ভার বিকল্পটি যুক্ত করতে হয়েছিল।
// in webpack
devServer: {
historyApiFallback: true,
stats: 'minimal'
}
আপনি যদি সার্ভার হিসাবে অ্যাপাচি বা এনগিনেক্স ব্যবহার করে থাকেন তবে আপনাকে একটি তৈরি করতে হবে .htaccess
(আগে তৈরি না হলে) এবং "চালু" পুনর্লিখনইঞ্জাইন
RewriteEngine On
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
RewriteRule ^ /index.html
আমার সার্ভার অ্যাপাচি, আমি রিফ্রেশ বা গভীর লিঙ্কিংয়ের সময় 404 ঠিক করতে যা করেছি তা খুব সহজ। অ্যাপাচি ভোস্ট কনফিগারেশনে কেবল একটি লাইন যুক্ত করুন:
ErrorDocument 404 /index.html
যাতে কোনও 404 ত্রুটি সূচক html এ পুনঃনির্দেশিত হয়, যা কৌনিক 2 রাউটিং চায়।
পুরো vhost ফাইল উদাহরণ:
<VirtualHost *:80>
ServerName fenz.niwa.local
DirectoryIndex index.html
ErrorDocument 404 /index.html
DocumentRoot "/Users/zhoum/Documents/workspace/fire/fire_service/dist"
ErrorLog /Users/zhoum/Documents/workspace/fire/fire_service/logs/fenz.error.log
CustomLog /Users/zhoum/Documents/workspace/fire/fire_service/logs/fenz.access.log combined
<Directory "/Users/zhoum/Documents/workspace/fire/fire_service/dist">
AllowOverride All
Options Indexes FollowSymLinks
#Order allow,deny
#Allow from All
Require all granted
</Directory>
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Methods "GET, POST"
Header set Access-Control-Allow-Credentials "true"
Header set Access-Control-Allow-Headers "Accept-Encoding"
</VirtualHost>
আপনি কোন সার্ভার ব্যবহার করছেন তা বিবেচনাধীন, আমি মনে করি পুরো পয়েন্টটি আপনার ইনডেক্স.ইচটিএমএলে 404 পুনর্নির্দেশের জন্য সার্ভারটি কনফিগার করার উপায়গুলি সন্ধান করছে।
সার্ভার কনফিগারেশন কোনও এসপিএর সমাধান নয়, যা আমার মনে হয়। যদি কোনও ভুল রুট চলে আসে তবে আপনি আবার কৌণিক এসপিএ পুনরায় লোড করতে চান না? সুতরাং আমি কোনও সার্ভার রুটের উপর নির্ভর করব না এবং অন্য রুটে পুনর্নির্দেশ করব না তবে হ্যাঁ আমি সূচি html কৌণিক অ্যাপ পাথের কৌণিক রুটের জন্য সমস্ত অনুরোধগুলি পরিচালনা করতে দেব।
অন্যথায় বা ভুল রুটের পরিবর্তে এটি ব্যবহার করে দেখুন। এটি আমার পক্ষে কাজ করে, নিশ্চিত নয় তবে মনে হয় এটি কাজ চলছে। কোনও সমস্যার মুখোমুখি হওয়ার সময় আমি এটিকে হোঁচট খেয়েছি।
@RouteConfig([
{ path: '/**', redirectTo: ['MycmpnameCmp'] },
...
}
])
https://github.com/angular/angular/issues/4055
তবে আপনার সার্ভার ফোল্ডারগুলি কনফিগার করতে এবং আপনার যদি এসপিএ নয় এমন এইচটিএমএল বা ওয়েব স্ক্রিপ্টগুলি রয়েছে ঠিক তখনই অ্যাক্সেস করতে ভুলবেন না। অন্যথায় আপনি সমস্যার মুখোমুখি হবেন। আমার মত যখন আপনার মত সমস্যার মুখোমুখি হচ্ছিল এটি সার্ভার কনফিগারেশন এবং তারপরের উপরের মিশ্রণ ছিল।
কৌণিক অ্যাপ্লিকেশনগুলি একটি সাধারণ স্ট্যাটিক এইচটিএমএল সার্ভারের সাথে পরিবেশন করার জন্য নিখুঁত প্রার্থী। অ্যাপ্লিকেশন পৃষ্ঠাগুলি গতিশীলভাবে রচনা করতে আপনার কোনও সার্ভার-সাইড ইঞ্জিনের দরকার নেই কারণ কৌণিক-পক্ষ থেকে অ্যাঙ্গুলার তা করে।
অ্যাপ্লিকেশনটি যদি কৌণিক রাউটার ব্যবহার করে তবে অ্যাপ্লিকেশনটির হোস্ট পৃষ্ঠা (index.html) এর কাছে নেই এমন ফাইলের জন্য জিজ্ঞাসা করার জন্য আপনাকে অবশ্যই সার্ভারটি কনফিগার করতে হবে।
একটি রাউন্ড অ্যাপ্লিকেশনটির "গভীর লিঙ্কগুলি" সমর্থন করা উচিত। একটি গভীর লিঙ্কটি এমন একটি ইউআরএল যা অ্যাপ্লিকেশনটির অভ্যন্তরের কোনও উপাদানটির পথ নির্দিষ্ট করে। উদাহরণস্বরূপ, http://www.example.com/heroes/42 হিরো বিশদ পৃষ্ঠার একটি গভীর লিঙ্ক যা আইডি: 42 সহ নায়ককে প্রদর্শন করে।
কোনও চলমান ক্লায়েন্টের মধ্যে থেকে যখন ব্যবহারকারী সেই ইউআরএল নেভিগেট করে তখন কোনও সমস্যা নেই। কৌণিক রাউটারটি ইউআরএলকে ব্যাখ্যা করে এবং সেই পৃষ্ঠা এবং নায়কের দিকে যাত্রা করে।
তবে কোনও ইমেলের কোনও লিঙ্কে ক্লিক করা, এটি ব্রাউজারের ঠিকানা বারে প্রবেশ করা, বা নায়ক বিশদ পৃষ্ঠায় থাকা অবস্থায় ব্রাউজারকে সতেজ করে তোলা - এই সমস্ত ক্রিয়াকলাপ নিজেই চলমান অ্যাপ্লিকেশনের বাইরে ব্রাউজার দ্বারা পরিচালিত হয়। ব্রাউজারটি সেই ইউআরএলটির জন্য রাউটারকে বাইপাস করে সার্ভারের কাছে সরাসরি অনুরোধ করে।
একটি স্থিতিশীল সার্ভার যখন নিয়মিতভাবে http://www.example.com/- এর জন্য একটি অনুরোধ পেয়ে থাকে তখন সূচক html প্রদান করে । তবে এটি http://www.example.com/heroes/42 প্রত্যাখ্যান করে এবং একটি 404 প্রদান করে - ত্রুটিটি পাওয়া যায় না যদি না পরিবর্তে সূচি html ফেরত দেওয়ার জন্য কনফিগার করা হয়
যদি এই সমস্যাটি উত্পাদনে ঘটে থাকে তবে নীচের পদক্ষেপগুলি অনুসরণ করুন
1) আপনার কৌণিক অ্যাপ্লিকেশনটির src ফোল্ডারে একটি Web.Config ফাইল যুক্ত করুন। এতে কোডের নীচে রাখুন।
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="Angular Routes" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
2) কৌণিক- cli.json এ এটিতে একটি উল্লেখ যুক্ত করুন। কৌণিক-ক্লি.জেসনে ওয়েবকনফিগকে নীচে দেখানো হিসাবে সম্পদ ব্লকে রাখুন।
"assets": [
"assets",
"favicon.ico",
"Web.config"
],
3) এখন আপনি উত্পাদন ব্যবহার করে সমাধান তৈরি করতে পারেন
ng build --prod
এটি একটি ডিস্ট ফোল্ডার তৈরি করবে। ডিস্ট ফোল্ডারের ভিতরে থাকা ফাইলগুলি কোনও মোড দ্বারা মোতায়েনের জন্য প্রস্তুত।
আপনি গড় প্রয়োগের জন্য এই সমাধানটি ব্যবহার করতে পারেন, আমি ভিউ ইঞ্জিন হিসাবে ejs ব্যবহার করেছি:
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.engine('html', require('ejs').renderFile);
app.use(function (req, res, next) {
return res.render('index.html');
});
এবং কৌণিক-ক্লিপ.জসনেও সেট করে
"apps": [
{
"root": "src",
"outDir": "views",
এটি পরিবর্তে ভাল কাজ করবে
app.get('*', function (req, res, next) {
res.sendFile('dist/index.html', { root: __dirname });
});
এটি পেতে ডিবি কল এবং সূচক ফেরত সূচি html নিয়ে সমস্যা তৈরি করছে
আইআইএসে আমরা যারা জীবন সংগ্রাম করে তাদের জন্য: সরকারী কৌণিক 2 ডক্সের উপর ভিত্তি করে এই সমস্যাটি সমাধান করার জন্য নিম্নলিখিত পাওয়ারশেল কোডটি ব্যবহার করুন (যে কেউ এই থ্রেডে পোস্ট করেছে? Http://blog.angular-university.io/angular2-router/ )
Import-WebAdministration
# Grab the 404 handler and update it to redirect to index.html.
$redirect = Get-WebConfiguration -filter "/system.WebServer/httperrors/error[@statusCode='404']" -PSPath IIS:\Sites\LIS
$redirect.path = "/index.html"
$redirect.responseMode = 1
# shove the updated config back into IIS
Set-WebConfiguration -filter "/system.WebServer/httperrors/error[@statusCode='404']" -PSPath IIS:\Sites\LIS -value $redirect
এটি কৌনিক 2 ডক্সের (উপরের লিঙ্ক) পরামর্শ অনুসারে 404 / /index.html ফাইলে পুনর্নির্দেশ করে।
আপনি নীচে চেষ্টা করতে পারেন। এটা আমার জন্য কাজ করে!
main.component.ts
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
...
export class MainComponent implements OnInit {
constructor(private router: Router) {
let path: string = window.location.hash;
if (path && path.length > 0) {
this.router.navigate([path.substr(2)]);
}
}
public ngOnInit() { }
}
আপনি রাউটারের পরামিতিগুলিতে বিভক্ত করতে পথ.সুবস্ট্র (2) আরও উন্নত করতে পারেন। আমি কৌনিক 2.4.9 ব্যবহার করছি
আমি শুধু। htaccess মূল যোগ করা।
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
RewriteRule ^ ./index.html
</IfModule>
এখানে আমি /
index.html তে। / index.html তে কেবল বিন্দু '।' (মূল ডিরেক্টরি) যুক্ত করব তা নিশ্চিত করুন যে আপনার বেসড পাথের সূচক html ফাইলটি মূল ডিরেক্টরি পথ এবং প্রকল্পের বিল্ডে সেট করা আছে।
আমি এইচটিএমএল 5 মোডে সাব পৃষ্ঠাগুলির ইউআরএল পথ সংরক্ষণ করতে চেয়েছিলাম সূচিগুলিতে কোনও পুনঃনির্দেশ না করে এবং সেখানকার কোনও সমাধানই আমাকে কীভাবে এটি করতে হয় তা বলেনি, সুতরাং আমি এটি কীভাবে সম্পাদন করেছি:
আপনার সমস্ত রুটের জন্য আইআইএসে সাধারণ ভার্চুয়াল ডিরেক্টরিগুলি তৈরি করুন এবং সেগুলি অ্যাপ্লিকেশনে রুট করুন।
এই অবস্থানের ট্যাগটি সহ আপনার সিস্টেম.ওয়েব সার্ভারটি আপনার ওয়েবকনফিগ.এক্সএমএলগুলিতে মুড়ে রাখুন, অন্যথায় আপনি এটি থেকে সদৃশ ত্রুটিগুলি পেয়ে যাবেন ভার্চুয়াল ডিরেক্টরিটির সাথে দ্বিতীয়বার ওয়েবকনফাইগ লোড করে:
<configuration>
<location path="." inheritInChildApplications="false">
<system.webServer>
<defaultDocument enabled="true">
<files>
<add value="index.html" />
</files>
</defaultDocument>
</system.webServer>
</location>
</configuration>
আমি কৌনিক 2 বীজ পরীক্ষা করেছিলাম এটি কীভাবে কাজ করে।
কোনও পৃষ্ঠা পুনরায় লোড হওয়ার পরে আপনি স্বয়ংক্রিয়ভাবে পুনঃনির্দেশ করতে এক্সপ্রেস-ইতিহাস-এপি-ফ্যালব্যাক ব্যবহার করতে পারেন ।
আমি মনে করি এই সমস্যাটি সমাধানের সবচেয়ে মার্জিত উপায় আইএমও।
আপনি যদি প্যাথলোকেশনস্ট্রেজি ব্যবহার করতে চান:
জাভা ইই / ওয়াইল্ডফ্লাইয়ের সাথে একক পৃষ্ঠার অ্যাপ্লিকেশন: সার্ভার-সাইড কনফিগারেশন
2017-জুলাই -11: যেহেতু এটি লিঙ্কযুক্ত এটি এই সমস্যাযুক্ত একটি প্রশ্নের তবে ইলেক্ট্রনের সাথে কৌনিক 2 ব্যবহার করে, আমি এখানে আমার সমাধান যুক্ত করব।
আমাকে যা করতে হয়েছিল তা হ'ল <base href="./">
আমার সূচক html থেকে সরানো এবং ইলেক্ট্রন সফলভাবে পৃষ্ঠা পুনরায় লোড করা শুরু করেছিল।
আমদানি যুক্ত করুন:
import { HashLocationStrategy, LocationStrategy } from '@angular/common';
এবং এনজিএমডিউল সরবরাহকারীতে যুক্ত করুন:
providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}]
মূল সূচীতে। Html অ্যাপের ফাইলটি বেস href ./index.html
থেকে এটিকে পরিবর্তন করে/
অ্যাপ্লিকেশনটি কোনও সার্ভারে মোতায়েনের সময় পৃষ্ঠাটির জন্য একটি সত্যিকারের url দেবে যা কোনও বাহ্যিক অ্যাপ্লিকেশন থেকে অ্যাক্সেস করা যেতে পারে।
শুধু যোগ .htaccess root- র মধ্যে 404 সমস্যাগুলি সমাধান করা যখন কৌণিক 4 apache2 মধ্যে পৃষ্ঠাটি রিফ্রেশ।
<IfModule mod_rewrite.c>
RewriteEngine on
# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
# Rewrite everything else to index.html
# to allow html5 state links
RewriteRule ^ index.html [L]
</IfModule>
আমি মনে করি আপনি 404 পাচ্ছেন কারণ আপনি http: // লোকালহস্ট / রুটটির অনুরোধ করছেন যা টমক্যাট সার্ভারে নেই। যেহেতু কৌণিক 2 টি ইউআরএল শেষে হ্যাশ ব্যবহার না করে ডিফল্টরূপে এইচটিএমএল 5 রাউটিং ব্যবহার করে, পৃষ্ঠাটি রিফ্রেশ করে অন্য উত্সটির অনুরোধ মনে হয়।
টমক্যাটে কৌনিক রাউটিং ব্যবহার করার সময় আপনাকে নিশ্চিত করতে হবে যে পৃষ্ঠাটি সতেজ করার সময় আপনার সার্ভার আপনার অ্যাপের সমস্ত রুটগুলি আপনার মূল সূচক html এ মানচিত্র করবে। এই সমস্যাটি সমাধানের একাধিক উপায় রয়েছে। যে কোনও একটি আপনার পক্ষে স্যুট করতে পারেন for
1) আপনার স্থাপনার ফোল্ডারের ওয়েব.এক্সএমএল এর নীচে কোডটি রাখুন:
<error-page>
<error-code>404</error-code>
<location>/index.html</location>
</error-page>
২) আপনি রুটগুলির জন্য ইউআরএলে # এর সাথে হ্যাশলোকেশনস্ট্র্যাটজি ব্যবহার করে দেখতে পারেন:
ব্যবহার করার চেষ্টা করুন:
রাউটারমডিউল.রোট (রুট, {ইউজ হ্যাশ: সত্য})
পরিবর্তে:
RouterModule.forRoot (রুট)
হ্যাশলোকেশনস্ট্রেটজি সহ আপনার ইউআরএলগুলি এমন হতে পারে:
HTTP: // স্থানীয় হোস্ট / # / রুট
3) টমক্যাট ইউআরএল পুনর্লিখন ভালভ: যদি সংস্থানটি খুঁজে পাওয়া যায় না তবে সূচক html এ পুনর্নির্দেশ করতে সার্ভার স্তর কনফিগারেশন ব্যবহার করে ইউআরএলগুলি পুনরায় লিখুন।
৩.১) মেটা-আইএনএফ ফোল্ডারের অভ্যন্তরে একটি ফাইল কনটেক্সট.এক্সএমএল তৈরি করুন এবং এর নীচের প্রসঙ্গটি অনুলিপি করুন।
<? xml version='1.0' encoding='utf-8'?>
<Context>
<Valve className="org.apache.catalina.valves.rewrite.RewriteValve" />
</Context>
৩.২) ওয়েব-আইএনএফের ভিতরে, পুনর্লিখনের ফাইলটি তৈরি করুন (এই ফাইলটিতে ইউআরএল পুনর্লিখনের নিয়ম রয়েছে এবং ইউআরএল পুনর্লিখনের জন্য টমক্যাট দ্বারা ব্যবহৃত হয়েছে)। Rewrite.config এর ভিতরে, নীচের সামগ্রীটি অনুলিপি করুন:
RewriteCond %{SERVLET_PATH} !-f
RewriteRule ^/(.*)$ /index.html [L]
এটি সঠিক উত্তর নয় তবে রিফ্রেশ করে আপনি 404 পৃষ্ঠার ত্যাগ করে সমস্ত মৃত কলগুলি হোমপৃষ্ঠায় পুনর্নির্দেশ করতে পারেন এটি অস্থায়ী হ্যাক মাত্র 404.html ফাইলটিতে পুনরায় খেলুন
<!doctype html>
<html>
<head>
<script type="text/javascript">
window.location.href = "http://" + document.location.host;
</script>
</head>
</html>
"রাউটার-না-ওয়ার্কিং-রি-লোডিং-দ্য ব্রাউজার" এর সমাধানের সর্বোত্তম সমাধানটি হ'ল আমাদের স্পা-ফ্যাল ফিরে ব্যবহার করা উচিত। আপনি যদি asp.net কোর দিয়ে কৌনিক 2 অ্যাপ্লিকেশন ব্যবহার করছেন তবে আমাদের এটি "স্টার্টআপস" পৃষ্ঠায় সংজ্ঞায়িত করতে হবে। এমভিসি রাউটের অধীনে। আমি কোডটি সংযুক্ত করছি।
app.UseMvc(routes =>
{
routes.MapRoute(
name: "default",
template: "{controller=Home}/{action=Index}/{id?}");
routes.MapSpaFallbackRoute("spa-fallback", new { controller = "Home", action = "Index" });
});
উত্তরটি বেশ জটিল। আপনি যদি সরল পুরানো অ্যাপাচি সার্ভার (বা আইআইএস) ব্যবহার করেন তবে সমস্যাটি পাবেন কারণ কৌণিক পৃষ্ঠাগুলি বাস্তবের জন্য বিদ্যমান নেই। তারা কৌণিক রুট থেকে "গণিত" হয়।
সমস্যাটি সমাধানের বিভিন্ন উপায় রয়েছে। একটি হ্যাশলোকেশনস্ট্রেজি ব্যবহার করা দ্বারা প্রদত্ত । তবে ইউআরএলটিতে একটি তীক্ষ্ণ চিহ্ন যুক্ত করা হয়েছে। এটি মূলত কৌণিক 1 (আমি ধরে নিই) সাথে সামঞ্জস্য করার জন্য। সত্যটি ইউআরএল-এর অংশ না হওয়ার পরে অংশটি হ'ল (তারপরে সার্ভার "#" চিহ্নের আগে অংশটি সমাধান করে)। এটি নিখুঁত হতে পারে।
এখানে একটি বর্ধিত পদ্ধতি (404 ট্রিকের উপর ভিত্তি করে)। আমি ধরে নিলাম আপনার কৌণিক অ্যাপ্লিকেশনটির "বিতরণ" সংস্করণ রয়েছে (ng build --prod
আপনি যদি -সিএলআই ব্যবহার করেন) এবং আপনি সরাসরি আপনার সার্ভারের মাধ্যমে পৃষ্ঠাগুলি অ্যাক্সেস করেন এবং পিএইচপি সক্ষম হয়ে থাকে।
যদি আপনার ওয়েবসাইট পৃষ্ঠাগুলির উপর ভিত্তি করে থাকে (উদাহরণস্বরূপ ওয়ার্ডপ্রেস) এবং আপনার কাছে একটি মাত্র ফোল্ডার রয়েছে যা কৌণিককে উত্সর্গীকৃত (আমার উদাহরণে "ডিস" নাম দেওয়া হয়েছে), আপনি কিছুটা অদ্ভুত কিছু করতে পারেন তবে, শেষে, সহজ। আমি ধরে নিই যে আপনি আপনার কৌনিক পৃষ্ঠাগুলি "/ ডিস্ট" -তে সংরক্ষণ করেছেন (সেই অনুযায়ী)<BASE HREF="/dist/">
) সংরক্ষণ করেছেন। এখন একটি 404 পুনর্নির্দেশ এবং পিএইচপি এর সহায়তা ব্যবহার করুন।
আপনার অ্যাপাচি কনফিগারেশনে (বা .htaccess
আপনার কৌণিক অ্যাপ্লিকেশন ডিরেক্টরি ফাইলের মধ্যে) আপনাকে অবশ্যই যুক্ত করতে হবেErrorDocument 404 /404.php
404.php নিম্নলিখিত কোড দিয়ে শুরু হবে:
<?php
$angular='/dist/';
if( substr($_SERVER['REQUEST_URI'], 0, strlen($angular)) == $angular ){
$index = $_SERVER['DOCUMENT_ROOT'] . $angular . "index.html";
http_response_code(200);
include $index;
die;
}
// NOT ANGULAR...
echo "<h1>Not found.</h1>"
যেখানে $angular
আপনার কৌণিক এর href সঞ্চিত মান index.html
।
নীতিটি বেশ সহজ, যদি আপাচি পৃষ্ঠাটি না খুঁজে পান তবে পিএইচপি স্ক্রিপ্টে 404 পুনর্নির্দেশ করা হয়। পৃষ্ঠাটি কৌনিক অ্যাপ্লিকেশন ডিরেক্টরিটির ভিতরে রয়েছে কিনা তা আমরা কেবল খতিয়ে দেখি। যদি এটি হয় তবে আমরা কেবল সূচক html সরাসরি লোড করি (পুনর্নির্দেশ ছাড়াই): ইউআরএল অপরিবর্তিত রাখার জন্য এটি প্রয়োজনীয়। আমরা এইচটিপি কোডটি 404 থেকে 200 এ পরিবর্তন করি (ক্রলারের জন্য আরও ভাল)।
যদি কৌণিক প্রয়োগে পৃষ্ঠাটির অস্তিত্ব না থাকে তবে কী হবে? ঠিক আছে, আমরা কৌণিক রাউটারের "ক্যাচ অল" ব্যবহার করি (কৌণিক রাউটার ডকুমেন্টেশন দেখুন)।
এই পদ্ধতিটি একটি প্রাথমিক ওয়েবসাইটের ভিতরে এম্বেডেড কৌণিক অ্যাপ্লিকেশনটির সাথে কাজ করে (আমি মনে করি ভবিষ্যতে এটি হবে)।
মন্তব্য:
mod_redirect
(URL গুলি rewriting দ্বারা) একটি ভাল সমাধান কারণ ফাইল (সম্পদ মত) সত্যিই লোড করা আছে তারপর, এটা অনেক শুধু "not found" সলিউশন ব্যবহার চেয়েও বেশি ঝুঁকিপূর্ণ সব সময়ে নয়।ErrorDocument 404 /dist/index.html
কাজগুলি ব্যবহার করে পুনর্নির্দেশ করা হচ্ছে তবে অ্যাপাচি এখনও 404 ত্রুটি কোডের সাথে সাড়া দিচ্ছে (যা ক্রলারগুলির পক্ষে খারাপ)।এটি সমস্যার স্থায়ী ফিক্স নয় বরং আরও অনেকটা কাজের চাপ বা হ্যাকের মতো like
আমার কৌণিক অ্যাপ্লিকেশনটি ঘ-পৃষ্ঠাগুলিতে স্থাপন করার সময় আমার এই একই সমস্যা ছিল। জি-পৃষ্ঠাগুলিতে আমার পৃষ্ঠাগুলি রিফ্রেশ করার সময় প্রথমে 404 বার্তা দিয়ে আমাকে স্বাগত জানানো হয়েছিল।
তারপরে @ গুনটার যা বলেছিল আমি ব্যবহার শুরু করি HashLocationStrategy
যা কৌনিক 2 সরবরাহ করা হয়েছিল।
তবে #
এটি ইউআরএলটিতে সমস্যাগুলির নিজস্ব সেট নিয়ে এসেছিল যা সত্যিই খারাপ ছিল ইউআরএলটিকে আরও খারাপ করে তোলে https://rahulrsingh09.github.io/AngularConcepts/#/faq
।
আমি এই সমস্যাটি সম্পর্কে গবেষণা শুরু করে একটি ব্লগ জুড়ে এসেছি। আমি এটিকে শট দেওয়ার চেষ্টা করেছি এবং এটি কার্যকর হয়েছে।
আমি এই ব্লগে উল্লিখিত হিসাবে কি করেছি।
আপনাকে আপনার জিএইচ-পৃষ্ঠাগুলির রেপোতে একটি 404.html ফাইল যুক্ত করে সূচনা করতে হবে যা এর ভিতরে একটি খালি HTML ডকুমেন্ট রয়েছে - তবে আপনার দস্তাবেজটি অবশ্যই 512 বাইটেরও বেশি (নীচে বর্ণিত) থাকতে হবে। এরপরে আপনার 404.html পৃষ্ঠার প্রধান উপাদানটিতে নিম্নলিখিত মার্কআপটি রাখুন:
<script>
sessionStorage.redirect = location.href;
</script>
<meta http-equiv="refresh" content="0;URL='/REPO_NAME_HERE'"></meta>
এই কোডটি প্রয়াসের প্রবেশদ্বার ইউআরএলটিকে স্ট্যান্ডার্ড সেশনসটরেজ অবজেক্টের একটি চলকটিতে সেট করে এবং তাত্ক্ষণিকভাবে একটি মেটা রিফ্রেশ ট্যাগ ব্যবহার করে আপনার প্রকল্পের ইনডেক্স। Html পৃষ্ঠায় পুনঃনির্দেশ করে। যদি আপনি একটি গিথুব সংস্থার সাইট করছেন, তবে বিষয়বস্তু বিশিষ্ট replacer পাঠ্যে কোনও রেপো নাম রাখবেন না, কেবল এটি করুন: সামগ্রী = "0; URL = '/'"
প্রাথমিকভাবে ব্যবহারকারী নেভিগ্রেটেড ইউআরএল ক্যাপচার এবং পুনরুদ্ধার করার জন্য, পৃষ্ঠার বর্তমান অবস্থাতে অন্য কোনও জাভাস্ক্রিপ্টের ক্রিয়াকলাপের আগে আপনাকে নিম্নলিখিত সূচী ট্যাগটি আপনার সূচিপত্রের html পৃষ্ঠাতে যুক্ত করতে হবে:
<script>
(function(){
var redirect = sessionStorage.redirect;
delete sessionStorage.redirect;
if (redirect && redirect != location.href) {
history.replaceState(null, null, redirect);
}
})();
</script>
জাভাস্ক্রিপ্টের এই বিটটি 404 এইচটিএমএল পৃষ্ঠায় আমরা সেশনসটোরেজে ক্যাশেড URL টি পুনরুদ্ধার করে এবং এটির সাথে বর্তমান ইতিহাসের এন্ট্রিটি প্রতিস্থাপন করে।
রেফারেন্স ব্যাকলেইকোডার এই কাজের জন্য @ ড্যানিয়েলকে ধন্যবাদ।
এখন উপরের ইউআরএলটি https://rahulrsingh09.github.io/AngularConcepts/faq এ পরিবর্তিত হয়েছে
আমি এটি (জাভা / স্প্রিং ব্যাকএন্ড ব্যবহার করে) আমার অ্যাংুলার রুটে সংজ্ঞায়িত সমস্ত কিছুর সাথে মেলে এমন হ্যান্ডলার যুক্ত করে স্থির করেছি, যা 404 এর পরিবর্তে সূচক html ফেরত পাঠায় This এটি কার্যকরভাবে (পুনরায়) অ্যাপ্লিকেশনটিকে বুটস্ট্র্যাপ করে এবং সঠিক পৃষ্ঠাটি লোড করে। আমার কাছে এমন কোনও কিছুর জন্য 404 হ্যান্ডলার রয়েছে যা এটির দ্বারা ধরা পড়ে না।
@Controller ////don't use RestController or it will just send back the string "index.html"
public class Redirect {
private static final Logger logger = LoggerFactory.getLogger(Redirect.class);
@RequestMapping(value = {"comma", "sep", "list", "of", "routes"})
public String redirectToIndex(HttpServletRequest request) {
logger.warn("Redirect api called for URL {}. Sending index.html back instead. This will happen on a page refresh or reload when the page is on an Angular route", request.getRequestURL());
return "/index.html";
}
}
আপনি যদি সার্ভার হিসাবে অ্যাপাচি বা এনগিনেক্স ব্যবহার করে থাকেন তবে আপনাকে একটি .htaccess তৈরি করতে হবে
<IfModule mime_module>
AddHandler application/x-httpd-ea-php72 .php .php7 .phtml
</IfModule>
# php -- END cPanel-generated handler, do not edit
<IfModule mod_rewrite.c>
RewriteEngine on
# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
# Rewrite everything else to index.html
# to allow html5 state links
RewriteRule ^ index.html [L]
</IfModule>