I'm building an hybrid angular app. The AngularJs Code has three different file for constants based on environment, created in this way
angular.module(...).constants(...).
I have a file called index.ts where i import the files of my project.
index.ts
import "./js/constants";
import "./js/constants_svil";
import "./js/constants_stage";
import "./js/constants_dev";
import "./js/angular-multi-select";
import "./js/angular-indexed-db";
import "./js/calendar";
import "./js/abmoment.min";
import "./js/acmoment-timezone-with-data";
import "./js/amoment-timezone-utils";
import "./js/fullcalendar";
import "./js/gcal";
import "./js/lang-all";
Is there a way to dynamically load this constants file based on environment? I saw there is a dynamic import used to load modules implemented in Typescript 2.4. Could it work? I need this file only for side effects, they don't have an export statement inside.
Edit: Now i'm using typescript 3.9
you can define different files for different build configurations in the angular.json:
example:
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
...
see: https://angular.io/guide/build
Related
I want to make a list of blog posts and therefor I thought it would be easy to use MDX because it helps with styling each blog text. But I don't know if it's possible to import a MDX file and put it in blogs.text.
I tried to use the npm package mdx.macro with it's function importMDX, but I get an error which says that the imported file is outside the src/.
mdx.macro documentation: https://www.npmjs.com/package/mdx.macro
import React, { lazy } from 'react';
import { importMDX } from 'mdx.macro';
const blog1 = lazy(() => importMDX('./blog1.md'));
export const blogs = [
{
title: "Hello World",
subtitle: "subtitle",
text: blog1
}
];
export default blogs;
I import this file in my blog and loop through all the items. But the importMDX keeps giving me the following error:
Module not found: You attempted to import
node_modules\.cache\mdx.macro\Content.6cbf05377c.mdx.js
which falls outside of the project src/ directory.
Relative imports outside of src/ are not supported.
Maybe there's an easier option than this?
Thanks in advance!
Adding to #mfakhrusy's answer , I had to change my blogs.js file to
import { mdx } from 'mdx.macro';
import Blog1 from './Blog1.js';
export const blogs = [
{
title: "My experiences as an intern working without getting paid",
subtitle: "And the difficulties that come along with being undervalued by a company",
text: <Blog1 />
}
];
export default blogs;
And my Blog1.js file contains this
import React from 'react';
import { mdx } from 'mdx.macro';
export const Blog1 = mdx`
# Don't Panic
Since we decided a few weeks ago to adopt the leaf as legal tender, we have, of course, all become immensely rich.
`
export default Blog1;
So now I can write blogs in markdown format and loop through them to show them on my website!
According to The create-react-app imports restriction outside of src directory
It's a restriction from CRA developer. You can try to eject your CRA app and try it again. (see eject script on package json), and remove ModuleScopePlugin from webpack config. Be careful though, eject is a one-way trip, you cannot go back.
It happens because from what I've seen from the doc, the package tries to generate a cache file which being imported later by the app, and CRA would prohibit that by throwing that error you encountered.
I am converting exiting project to typescript. The project is using a package ng-idle and it has #types package with name angular-idle and the file #types/angular-idle/index.d.ts contains
declare module 'angular' {
export namespace idle {
....
How do I import this package
import * as ngIdle from 'angular-idle'
or
import * as ngIdle from 'ng-idle'
There are a few ways to do this
import {idle} from 'angular'
const blah = idle.BLAH
You can even rename the namespace on import
import {idle as ng_idle} from 'angular'
const blah = ng_idle.BLAH
If you already import angular
import * as angular from 'angular'
import idle = angular.idle
const blah = idle.BLAH
(or use angular.idle directly)
I have
require.config({
paths: {
"TestLib": "../app/lib/TestLib"
}
in my require.config, and which import should i use in my code?
(my code file path in under 'app' folder)
eg:
import {TestLib} from 'lib/TestLib';
import {TestLib} from './lib/TestLib';
import {TestLib} from 'TestLib';
You have to use
import {TestLib} from './lib/TestLib';
As you are already in app folder.You have to go to lib and then import TestLib as above.
I'm new to REACT. How do I "import" an AMD/requirejs "define" module from an import in a ".jsx" file in a REACT project?
Say you have...
define('project/module',[
'./Viewport'
]
In a JSX file, how can you import this ...
import "project/module"
How can I make it work?
I am new to Angular, background is server side Java, .Net...
So, I completed the Tour of Heroes and I have created simple hard coded multi-page application. Now I need to go the next step and call the server to retrieve data via a rest/JSON call. Based on the AngularJS example:
https://angular.io/docs/ts/latest/guide/server-communication.html
and a few other blogs such as:
http://blog.thoughtram.io/angular/2015/09/17/resolve-service-dependencies-in-angular-2.html
I have a pretty good understanding of how it is supposed to work. However, I see two errors now:
In the browser: Cannot resolve all parameters for 'AuthService'(?). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'AuthService' is decorated with Injectable.
and in NPM:
app/auth.service.ts(9,19): error TS2304: Cannot find name 'Http'.
I have no clue how to chase the dependencies down. packages.json? typings.json, tsconfig.json... Or how they all work; and I cannot find any documentation; any suggestions?
auth.service:
import {Injectable} from 'angular2/core';
import {HTTP_PROVIDERS} from 'angular2/http';
#Injectable()
export class AuthService {
items:Array<any>;
constructor(http:Http) {
}
}
main.ts
import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component'
import {HTTP_PROVIDERS} from 'angular2/http';
import { AuthService } from './auth.service';
bootstrap(AppComponent, [HTTP_PROVIDERS, AuthService]);
I have not consumed the Auth.Service in an component yet.
Tim
I think the problem is you are not pulling in Http, just HTTP_PROVIDERS, in your auth.service try this
import {Http} from 'angular2/http'