नोडजेस

Question

में कोणीय 2 मार्ग पथ को कैसे संभालें I Angular2 के साथ एक नोडजेएस ऐप पर काम कर रहा हूं। मेरे ऐप में, मेरे पास होम पेज और सर्च पेज है। मुख पृष्ठ के लिए मैं एक HTML पृष्ठ कि स्थानीय होस्ट के लिए प्रस्तुत करना होगा: खोज करने के लिए नेविगेट 3000/ और मुख पृष्ठ उपयोगकर्ता से यानी स्थानीय होस्ट: 3000/खोज पेज है कि मैं angular2 मार्गों द्वारा नियंत्रित किया।

मेरे पास खोज पृष्ठ के लिए पृष्ठ नहीं है जिसका दृश्य कोणीय 2 द्वारा प्रस्तुत किया गया है। लेकिन जब मैंने सीधे लोकलहोस्ट मारा: 3000/खोज क्योंकि मेरे पास मेरे नोड ऐप में यह रूटिंग नहीं है, यह त्रुटि देता है।

मुझे नहीं पता कि यह नोड ऐप में कैसे संभालें?

Answer 1

यदि आप सीधे ब्राउज़र नेविगेशन बार में localhost:3000/search दर्ज करते हैं, तो आपका ब्राउज़र आपके सर्वर पर '/ खोज' करने का अनुरोध जारी करता है, जिसे कंसोल में देखा जा सकता है (सुनिश्चित करें कि आप 'लॉग संरक्षित करें' बटन को चेक करें)।

Navigated to http://localhost:3000/search 

आप एक पूरी तरह से स्थिर सर्वर चलाते हैं, तो यह एक त्रुटि के रूप में खोज पेज सर्वर पर मौजूद नहीं है उत्पन्न करता है,। एक्सप्रेस का उपयोग करना, उदाहरण के लिए, आप इन अनुरोधों को पकड़ सकते हैं और index.html फ़ाइल लौटा सकते हैं। कोणीय 2 बूटस्ट्रैप kicks-in, और आपके @RouteConfig में वर्णित/खोज मार्ग सक्रिय है।

// example of express() 
let app = express(); 
app.use(express.static(static_dir)); 

// Additional web services goes here 
... 

// 404 catch 
app.all('*', (req: any, res: any) => { 
    console.log(`[TRACE] Server 404 request: ${req.originalUrl}`); 
    res.status(200).sendFile(index_file); 
}); 

Answer 2

आप HashLocationStrategy

import { LocationStrategy, HashLocationStrategy } from "angular2/router"; 
bootstrap(AppComponent, [ 
ROUTER_PROVIDERS, 
provide(LocationStrategy, { useClass: HashLocationStrategy }) 
]); 

उपयोग करने के लिए अपने बूटस्ट्रैप फ़ाइल में की जरूरत है।

यदि आप PathLocationStrategy (बिना # के) के साथ जाना चाहते हैं तो आपको अपने सर्वर के लिए पुनः लिखने की रणनीति सेट करनी होगी।

Answer 3

मैं इस विषय को काफी समय से खोद रहा हूं, और बहुत सारी विधि को आजमाएं जो काम नहीं करते हैं। यदि आप कोणीय-क्ली का उपयोग कर रहे हैं और एक्सप्रेस के साथ, तो मुझे एक समाधान मिला है यदि चुना गया उत्तर आपके लिए काम नहीं करता है। express-history-api-fallback

[कोणीय] @NgModule के अंतर्गत, अपने app.module.ts फ़ाइल बदलें> निम्नलिखित के रूप में आयात:

RouterModule.forRoot(routes), ... 

यह इसलिए कहा जाता है: "स्थान रणनीति"

इस नोड मॉड्यूल का प्रयास करें

आप शायद इस तरह का उपयोग कर "हैश स्थान रणनीति" थे:

RouterModule.forRoot(routes, { useHash: true }) , ... 

[एक्सप्रेस & नोड] मूल रूप से आपको यूआरएल को सही तरीके से संभालना होगा, इसलिए यदि आप "एपीआई/डेटा" आदि को कॉल करना चाहते हैं जो एचटीएमएल 5 स्थान रणनीति के साथ संघर्ष नहीं करता है। express-history-api-fallback module आवश्यकता होती है -

अपने server.js फ़ाइल में

चरण 1. (यदि आप एक्सप्रेस जनरेटर का इस्तेमाल किया, मैं स्पष्टता के लिए middleware.js के रूप में इसका नाम बदलना है)।

const fallback = require('express-history-api-fallback'); 

चरण 2।आपके पास कई मार्ग मॉड्यूल हो सकते हैं, sth। जैसे:

app.use('/api/users, userRoutes); 
app.use('/api/books, bookRoutes); ...... 
app.use('/', index); // Where you render your Angular 4 (dist/index.html) 

आपको लिख रहे हैं के साथ Becareful, मेरे मामले में मैं app.use तहत मॉड्यूल सही फोन ('/', सूचकांक);

app.use(fallback(__dirname + '/dist/index.html')); 

* सुनिश्चित करें कि यह 404 या एसएचएच को संभालने से पहले है। उसके जैसा ।

यह दृष्टिकोण मेरे लिए काम करता है:) मैं EAN ढेर (CLI साथ Angular4, एक्सप्रेस, नोड)