Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

'ng build -prod' outputs no errors but will not instantiate, ng serve instantiates OK

See original GitHub issue

OS? Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?) Mac OS X El Capitan
Versions. Please run ng --version. If there’s nothing outputted, please run in a Terminal: angular-cli: 1.0.0-beta.5 node: 4.4.5 os: darwin x64
Repro steps. Was this an app that wasn’t created using the CLI? What change did you do on your code? etc. ng new APPNAME npm install --save sass node-sass ng generate route ROUTENAME ng serve (runs OK) ng build -prod AND/OR ng serve -prod (build is successful, and all assets load be it on a server OR via localhost, there are no errors in the console, but the app will NOT instantiate )
The log given by the failure. Normally this include a stack trace and some more information. all assets including main.js along with all other dependancies appear to load correctly, and there are NO errors output to the console. The only output is the ‘loading…’ text inside the my-app component tag
Mention any other details that might be useful.

If i include main.js manually AFTER an ng build -prod and as the last element in the rootindex.html before closing </body> tag <script src="main.js"></script>, then the app instantiates and works OK including my new route. Why is this? Am i missing a step? Something in the system-config.ts or tsconfig.ts perhaps? something im missing in System.import ?

ANY help at all greatly appreciated.

here is my built index.html with the mod that works OK for reference albeit i have to believe this is not ok to use:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Otv</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css">
</head>
<body>
  <otv-app>Loading...</otv-app>

    <script src="vendor/es6-shim/es6-shim.js"></script>
    <script src="vendor/reflect-metadata/Reflect.js"></script>
    <script src="vendor/systemjs/dist/system.src.js"></script>
    <script src="vendor/zone.js/dist/zone.js"></script>
    <script>
      System.import('system-config.js').then(function () {
        System.import('main');
      }).catch(console.error.bind(console));
    </script>

   <!-- MANUALLY INCLUDING MAIN.JS HERE -->
    <script src="main.js"></script>

</body>
</html>

Issue Analytics

State:
Created 7 years ago
Comments:5 (2 by maintainers)

Top GitHub Comments

1reaction

gitdisruptcommented, Jun 1, 2016

apologies for the cc but i am desperate and just want to get this right… hopeful for any help at all sincerely appreciated @hansl @IgorMinar @jelbourn @chuckjaz

0reactions

angular-automatic-lock-bot[bot]commented, Sep 5, 2019

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

Top Results From Across the Web

ng serve and ng build is not working - Stack Overflow

The most common reason for this is a broken npm install. Please make sure your package.json contains both @angular/compiler-cli and typescript ...

Identify and Fix Build and Deployment Errors in Your Angular ...

In this guide, you will learn how to spot some of the most common build and deployment errors and how to resolve them...

Angular App Shell - Boost Application Startup Performance

Step 3 of 7 - Profiling Application Startup Before using an App Shell. Let's start the application in production mode: ng serve --prod....

Deployment - Angular

For the simplest deployment, create a production build and copy the output directory to a web server. Start with the production build: content_copy...

48 answers on StackOverflow to the most popular Angular ...

I gathered the most common questions and answers from Stackoverflow. ... You can get a preview of your application using the ng serve...