// 可以注册那些在 Universal 环境下运行应用时特有的服务提供商
@NgModule({
imports: [
AppBrowserModule,// 客户端应用的 AppModule
ServerModule,// 服务端的 Angular 模块
ModuleMapLoaderModule,// 用于实现服务端的路由的惰性加载
ServerTransferStateModule,// 在服务端导入，用于实现将状态从服务器传输到客户端
],bootstrap: [AppComponent],})
export class AppServerModule {
}

}
}

if (environment.production) {
enableProdMode();
}

// 在 DOMContentLoaded 时运行我们的代码，以使 TransferState 正常工作
document.addEventListener('DOMContentLoaded',() => {
platformBrowserDynamic().bootstrapModule(AppBrowserModule);
});

// Faster server renders w/ Prod mode (dev mode never needed)
enableProdMode();

// Express server
const app = express();

const PORT = process.env.PORT || 4000;
const DIST_FOLDER = join(process.cwd(),'dist');

// Our index.html we'll use as our template
const template = readFileSync(join(DIST_FOLDER,'browser','index.html')).toString();

// * NOTE :: leave this as require() since this file is built Dynamically from webpack
const {AppServerModuleNgFactory,LAZY_MODULE_MAP} = require('./dist/server/main.bundle');

// Express Engine
import { ngExpressEngine } from '@nguniversal/express-engine';
// Import module map for lazy loading
import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';

// Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
app.engine('html',ngExpressEngine({
bootstrap: AppServerModuleNgFactory,providers: [
provideModuleMap(LAZY_MODULE_MAP)
]
}));

app.set('view engine','html');
app.set('views',join(DIST_FOLDER,'browser'));

/* - Example Express Rest API endpoints -
app.get('/api/*',(req,res) => { });
/

// Server static files from /browser
app.get('.',express.static(join(DIST_FOLDER,'browser'),{
maxAge: '1y'
}));

// ALl regular routes use the Universal engine
app.get('*',res) => {
res.render('index',{req});
});

// Start up the Node server
app.listen(PORT,() => {
console.log(Node Express server listening on http://localhost:${PORT});
});

// Import module map for lazy loading
import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';
import { renderModuleFactory } from '@angular/platform-server';
import { ROUTES } from './static.paths';

// * NOTE :: leave this as require() since this file is built Dynamically from webpack
const {AppServerModuleNgFactory,LAZY_MODULE_MAP} = require('./dist/server/main.bundle');

const BROWSER_FOLDER = join(process.cwd(),'browser');

// Load the index.html file containing referances to your application bundle.
const index = readFileSync(join('browser','index.html'),'utf8');

let previousRender = Promise.resolve();

// Iterate each route path
ROUTES.forEach(route => {
const fullPath = join(BROWSER_FOLDER,route);

// Make sure the directory structure is there
if (!existsSync(fullPath)) {
mkdirSync(fullPath);
}

// Writes rendered HTML to index.html,replacing the file if it already exists.
prevIoUsRender = prevIoUsRender.then(_ => renderModuleFactory(AppServerModuleNgFactory,{
document: index,url: route,extraProviders: [
provideModuleMap(LAZY_MODULE_MAP)
]
})).then(html => writeFileSync(join(fullPath,html));
});

module.exports = {
entry: {
server: './server.ts',// This is our Express server for Dynamic universal
prerender: './prerender.ts' // This is an example of Static prerendering (generative)
},target: 'node',resolve: {extensions: ['.ts','.js']},externals: [/(node_modules|main..*.js)/,],// Make sure we include all node_modules etc
output: {
path: path.join(dirname,'dist'),// Puts the output at the root of the dist folder
filename: '[name].js'
},module: {
rules: [
{test: /.ts$/,loader: 'ts-loader'}
]
},plugins: [
new webpack.ContextReplacementPlugin(
/(.+)?angular(\|\/)core(.+)?/,// fixes WARNING Critical dependency: the request of a dependency is an expression
path.join(dirname,'src'),// location of your src
{} // a map of your routes
),new webpack.ContextReplacementPlugin(
/(.+)?express(\|\/)(.+)?/,{}
)
]
};

ngOnInit() {
this.poiSearch(this.keyword,'北京市').subscribe((data: any) => {
console.log(data);
});
}

ngOnDestroy() {
}

poiSearch(text: string,city?: string): Observable {
return this.http.get(encodeURI(http://restapi.amap.com/v3/place/text?keywords=${text}&city=${city}&offset=20&key=55f909211b9950837fba2c71d0488db9&extensions=all));
}
}

@Component({
selector: 'app-home',OnDestroy {
constructor(public http: HttpClient,private state: TransferState) {
}

ngOnInit() {

// 采用一个标记来区分服务端是否已经拿到了数据，如果没拿到数据就在客户端请求，如果已经拿到数据就不发请求
const kfcList：any[] = this.state.get(KFCLIST_KEY,null as any);

if (!this.kfcList) {
  this.poiSearch(this.keyword,'北京市').subscribe((data: any) => {
    console.log(data);
    this.state.set(KFCLIST_KEY,data as any); // 存储数据
  });
}

}

ngOnDestroy() {
if (typeof window === 'object') {
this.state.set(KFCLIST_KEY,null as any); // 删除数据
}
}

poiSearch(text: string,city?: string): Observable {
return this.http.get(encodeURI(http://restapi.amap.com/v3/place/text?keywords=${text}&city=${city}&offset=20&key=55f909211b9950837fba2c71d0488db9&extensions=all));
}
}