Angular 1.4 usage

[ajaykumarsana]

Hi @joeldenning ,

Can we use Single spa on Angular 1.4 code which uses routes ($stateProvider) to render pages? If so please help me. And can we do import override Angular 1.4 code ?

Thank you

[joeldenning]

Can we use Single spa on Angular 1.4 code

Yes, you can use single-spa-angularjs with Angular 1.4 projects. I have done so with a company that I consult with.

which uses routes ($stateProvider) to render pages

$stateProvider is from angular-ui-router. You can use ui-router with single-spa-angularjs, but must provide the uiRouter boolean.

And can we do import override Angular 1.4 code ?

You can do import map overrides for any SystemJS module, including Angular 1.4 code. Doing so depends on your build system for the code. If you're using gulp/grunt/global scripts, see https://single-spa.js.org/docs/ecosystem-angularjs#as-a-systemjs-module. If using webpack, you can do it with https://single-spa.js.org/docs/ecosystem-angularjs#with-a-bundler.

Full documentation

Github repo for single-spa-angularjs

I am closing this issue since we have documentation for this. Feel free to comment further or reopen.

[ajaykumarsana]

Hi @joeldenning , 'm sorry that 'm putting more questions to you. i'm using Angular 1.4 code with grunt as build tool for my project. It has so many assets(images and css files) and partial-html to bind unique routes. I wanted to use that with coexisting front end.

Grunt generates buildscript.js for me So, How do i link those assets to coexisting front end.

Can i use assetUrl? Please help!!!

Thank you.

[joeldenning]

coexisting-angular-microfrontends uses Angular 9, not AngularJS. You can add AngularJS 1.4 applications to it, though.

See https://github.com/joeldenning/coexisting-angular-microfrontends/issues/51 where someone else asked similar questions - there might be some info there that is helpful for you.

i'm using Angular 1.4 code with grunt as build tool for my project

Using a bundler like webpack makes a couple things a bit easier, but it's okay to stick with Grunt when getting started. Refactoring to use webpack can often be a big project.

Can i use assetUrl?

The assetUrl function is part of the single-spa-angular project, which only works for Angular 2+. You won't be able to use it directly in an Angular 1.4 project.

Regarding loading images, fonts, and css, the key concept is that you should load image and css from URLs that are relative to your project, instead of relative to the current page. In webpack projects, this is done automatically via the webpack public path. For grunt projects, though, there is no automatic way of doing it. I'll share some code below on how to do it:

Step 1 Make sure that you load single-spa-angularjs into your root config's HTML file:

<script src="https://cdn.jsdelivr.net/npm/single-spa-angularjs@3.3.0/lib/single-spa-angularjs.js"></script>

Step 2

// Paste this code into a new file called main.js in your AngularJS 1.4 project
// Make sure the project is included in your Grunt config and is part of the final javascript file.

System.register([], function(_export) {
  return {
    execute: function() {
      _export(window.singleSpaAngularjs.default({
        angular: angular,
        mainAngularModule: 'app',
        uiRouter: true,
        preserveGlobal: false,
        template: '<my-component />',
      }))
    }
  }
})

Step 3

Finally, add your project to your root config's import map

<script type="systemjs-importmap">
  {
    "imports": {
      "angular-1.4-project": "http://localhost:8080/bundle.js"
    }
  }
</script>

You'll need to change the URL to be correct for your code - you want to match the port and file name that are created and served by grunt.

[ajaykumarsana]

Hi @joeldenning ,

I followed Step 1 to 3 and i was able to load my project, only concern was to load assets. Thanks a lot for the detailed description.