ng build -prod

来源：互联网发布：数据库项目经理的收获编辑：程序博客网时间：2024/05/16 21:12

昨天，在ng new my-app之后，我决定把ng cli移植到现在的项目中，renderhouseimage，在大量的copy paste之后，发现有如下一个问题

在用ng build之后，由于代码做了精减，很难方便调试，于是我就想，能不能在开发阶段用JIT,发布的时候，用aot?

于是我就新建了一个index-dev.html (顺便介绍一下，我的开始环境是： vs 2017 + asp.net core + vs .code)

<!DOCTYPE html><html><head>    <title></title>    <meta charset="UTF-8">    <base href="index-dev.html">    <meta name="viewport" content="width=device-width, initial-scale=1">    <link rel="stylesheet" href="/content/styles.css">    <link rel="icon" type="image/x-icon" href="favicon.ico">    <link href="content/angular.css" rel="stylesheet" />    <link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />    <link href="/node_modules/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet" />    <script src="/node_modules/core-js/client/shim.min.js"></script>    <script src="/node_modules/zone.js/dist/zone.js"></script>    <script src="/node_modules/systemjs/dist/system.src.js"></script>    <script src="systemjs.config.js"></script>    <script src="/node_modules/jquery/dist/jquery.min.js"></script>    <script src="/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>    <style type="text/css">        .modal-dialog {            position: absolute;            left: 35%;            top: 30%;            transform: translateX(-50%) translateY(-50%);        }    </style>    <script>        System.import('main.js').catch(function (err) {            alert("ERROR" + err);            $("#_error").html(err);            console.error(err);        });    </script></head><body>    <app-root>        <div class="alert alert-info" id="_error">            <div class="alert alert-primary h3" style="font-weight:bolder">                正在加载,请稍等...            </div>            <img src="content/loading.gif" />        </div>    </app-root></body></html>

上面是我的专用于开发的index.html,而用于打包的html就非常简单了

<!doctype html><html><head>    <meta charset="utf-8">    <title></title>    <base href="index.html">    <link href="content/angular.css" rel="stylesheet" />    <meta name="viewport" content="width=device-width, initial-scale=1">    <link rel="icon" type="image/x-icon" href="favicon.ico"></head><body>    <style type="text/css">        .modal-dialog {            position: absolute;            left: 35%;            top: 30%;            transform: translateX(-50%) translateY(-50%);        }    </style>    <app-root>Loading...</app-root></body></html>

但我又碰到一个问题,用jit一切正常，但一旦ng build -prod之后，就抛错误： i.modal未定义，我估计是因为我用的bootstrap的js没有加载，于是网上google （建议大家使用ExpressVPN)。

又有说，在.angular-cli.json中修改下面

  "styles": [        "./../node_modules/bootstrap/dist/css/bootstrap.min.css",        "./../node_modules/bootstrap/dist/css/bootstrap-theme.min.css"      ],      "scripts": [        "./../node_modules/jquery/dist/jquery.js",        "./../node_modules/bootstrap/dist/js/bootstrap.js"      ],

我试了一下，jquery 是加载进来了，但bootstrap始终没有加载进来，2小时之后，这个问题还是没有解决，于是我就想从system.js中去强制加载

于是在main.ts中增加了下面两段

import * as $ from 'jquery';import  "bootstrap";

但编译又不通过，只能再去的jquery/bootstrap tsd，在解决了tsd之后，修改system.config.js

map：{    'jquery': 'npm:jquery/dist',    'bootstrap': 'npm:bootstrap/dist/js'}packages:{  jquery: {                main: 'jquery.js',                defaultExtension: 'js'            },bootstrap:            {                main: 'bootstrap.js',                defaultExtension: 'js'            }}

终于一切正常工作了.

:-)

0 0