美文网首页
(配置与打包)

(配置与打包)

作者: 马丁路德东 | 来源:发表于2017-07-21 13:43 被阅读0次

    终究还是要回到原始的版本 —— 马丁路德.东

    (一)构建(也就是转译)
    解决spa不能舒心的问题在跟模块更改配置providers

    @NgModule({
      declarations: [
        AppComponent,
        NavbarComponent,
        FooterComponent,
        SearchComponent,
        CarouselComponent,
        ProductComponent,
        StarsComponent,
        ProductDetailComponent,
        HomeComponent,
        FilterPipe
      ],
      imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        RouterModule.forRoot(routeConfig),
        ReactiveFormsModule
      ],
      providers: [ProductService,WebSocketService,
        {provide: LocationStrategy,useClass:HashLocationStrategy}],
      bootstrap: [AppComponent]
    })
    

    然后你npm上

    ng build
    

    (二)部署
    在服务器上新建clicent文件夹
    将打包好的文件放进去就行了
    然后更改服务器路由配置

    import * as path from 'path';
    app.use('/', express.static(path.join(__dirname, '..', 'clicent')));
    

    没那么简单,如果想要在本地预览,

    一个是改变index.html。的(这是我编辑器的路径)

     <base href="http://localhost:63342/aution1/dist/">
    
    

    还要把所有的http请求改为绝对路径
    放服务器的时候把base删了。

    (三)多环境
    1.在angular-cli中引入不同的配置而已。
    在文件的根目录,有一个angular-cli的配置文件
    其中

     "environments": {
            "source": "environments/environment.ts",
            "dev": "environments/environment.ts",
            "prod": "environments/environment.prod.ts"
          }
    

    这是他的多环境配置文件。其中第一个source是通用配置,加新的环境就是在对象里面再加一个对象和相对应的文件就行。(保证每一个文件里都有相同的配置参数)

    export const environment = {
      production: false
    };
    

    2.在代码中引用环境变量比如main.ts中是否调用生产模式

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

    3.我们可以再package.json中的更改属性 start
    为prod(看自己用哪个环境)

     "start": "ng serve --env=prod --proxy-config proxy.conf.json",
    

    我们在控制器里面直接用environment.什么什么的就能去到自己的环境变量了。

    注意在打包的时候,也要加上自己的配置参数

    ng build --env=prod
    

    相关文章

      网友评论

          本文标题:(配置与打包)

          本文链接:https://www.haomeiwen.com/subject/qhwskxtx.html